﻿@page "/movie"
@layout FrontLayout

<PageTitle>电影</PageTitle>

<div style="width: 95%;margin: 0 auto;">
    <!--头部-->
    <div class="movie-header">
        <Card Bordered="true" Hoverable="true" Style="cursor: default;">
            <div class="movie-header-des">
                <div>十年前你笑着看，十年后发现当初的笑点都是泪点，笑中带泪，无厘头中见人生;</div>
                <div style="margin-top: 2px;">
                    曾经有一份真诚的爱情摆在我面前，我没有珍惜，等到失去的时候才追悔莫及，人世间最痛苦的事情莫过于此。如果上天能够给我一个重新来过的机会，我会对那个女孩子说三个字：‘我爱你’。如果非要给这份爱加上一个期限，我希望是，一万年。
                    做人如果没有梦想，跟咸鱼有什么分别。
                </div>
                <div style="margin-top: 2px;font-style: italic;font-weight: bold;color:#03a9f4;">
                    星爷的经典传奇永远不会随时间而泯灭！
                </div>
            </div>

            <div class="year-tags">
                @foreach (var year in totalYears)
                {
                    <Tag Color="@GetTagColor()" OnClick="@(e => GoAnchor($"anchor-{year}"))" Style="cursor: pointer;">@year</Tag>
                }
            </div>
        </Card>
    </div>

    <!--主要内容-->
    <div class="movie-main">
        @foreach (var item in movieDataList)
        {
            <Card Class="row-card" Bordered="false" Hoverable="true" BodyStyle="padding: 18px 24px 30px 24px;" style="cursor: default;margin-bottom: 20px;">
                <TitleTemplate>
                    <!--锚点-->
                    <span name="@($"anchor-{item.Year}")" id="@($"anchor-{item.Year}")"></span>
                    <h2 style="margin-bottom: 0;">@(item.Year)年</h2>
                    <!--点评-->
                    <p style="margin-bottom: 0;">@GetAnnualReview(item.Year)</p>
                </TitleTemplate>
                <Body>
                    @foreach (var movie in item.List)
                    {
                        <GridRow>
                            <GridCol Style="width: 200px;text-align: center;">
                                <div style="width: 180px;height: 230px;margin: 0 auto;">
                                    <img style="width: 100%;height: 100%;vertical-align: middle;object-fit: cover;" src="@movie.Img">
                                </div>
                            </GridCol>
                            <GridCol Style="flex: 1;width: 80%;cursor: text;">
                                <div style="display: flex;flex-direction: column;">
                                    <h3 style="margin: 0;font-weight: 600;">@movie.Name</h3>
                                    <div class="video-info-box">
                                        <div>
                                            类型：<span style="font-size: 12px;color: #777;">@movie.Category</span><br />
                                            地区：<span style="font-size: 12px;color: #777;">@movie.Region</span><br />
                                            年份：<span style="font-size: 12px;color: #777;">@(movie.Year)年</span><br />
                                            导演：<span style="font-size: 12px;color: #777;">@movie.Director</span><br />
                                        </div>
                                        <div>
                                            主演：<span style="font-size: 12px;color: #777;">@movie.Actors</span>
                                        </div>
                                        <!-- 简介 -->
                                        <div class="video-info-introduction">
                                            简介：<span style="font-size: 12px;color: #777;">@movie.Intro</span>
                                        </div>
                                    </div>
                                </div>
                            </GridCol>

                            <div style="width: 100%;margin: 15px 8px;">
                                <!--评语-->
                                <div style="margin-bottom: 10px;">
                                    点评：<span style="color: #fa8c16; font-weight: 500;">好看啊好看啊好看啊</span>
                                </div>

                                <div>
                                    <Tag PresetColor="@PresetColor.Purple" OnClick="@(()=>GetVlinksById(movie.Id))" Style="cursor: pointer;">显示链接</Tag>

                                     <a href="@movie.Url" target="_blank"><Button Type="@ButtonType.Link">源站观看</Button></a>
                                 </div>
                                @if (vlinkCache.ContainsKey(movie.Id))
                                {
                                    <Space Size=@(("8", "10")) Wrap Style="margin-top: 5px;">
                                         @foreach (var vlink in vlinkCache[movie.Id])
                                        {
                                            <SpaceItem>
                                                <Tag Color="#87d068" OnClick="@(() => GetRealPlayLink(vlink.Name,vlink.Url))"
                                                     Style="cursor: pointer;">
                                                    @vlink.Name
                                                </Tag>
                                            </SpaceItem>
                                        }
                                    </Space>
                                }
                            </div>
                            <Divider />
                        </GridRow>
                    }

                </Body>
            </Card>

        }

        <!--分页-->
        <div style="text-align: center;">
            <Pagination PageSize="@pageSize" Total="@tatalCount" OnChange="OnPaginationChangeAsync" />
        </div>
    </div>
</div>


<!--播放器-->
<Modal Title="@playerTitle" Footer="@null" Centered="@true" Draggable="@false"
       Keyboard="@false" MaskClosable="@false" DestroyOnClose="@true" Visible="@playerIsVisible"
       OnCancel="PlayerClose" Width="1200" BodyStyle="min-height: 540px;padding: 0;" Style="height: 620px;">

    <iframe src="@realPlayUrl" style="height: 100%;width: 100%;min-height: 540px;" frameborder="0" border="0" marginwidth="0"
            marginheight="0" scrolling="no" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen"
            msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
            webkitallowfullscreen="webkitallowfullscreen" security="restricted"
            sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
</Modal>